<template>
 <div class="box">
      <header class="header">
        <van-search  v-model="value" show-action
 placeholder="OPPO A3" @search="onSearch" >
  <template #action>
    <div @click="onClickButton">搜索</div>
  </template>
</van-search>
      </header>
      <main class="main">
        <van-swipe :autoplay="3000" lazy-render>
  <van-swipe-item v-for="image in images" :key="image">
    <img :src="image" style="width: 100%;
    height: 200px;"/>
  </van-swipe-item>
</van-swipe>
<!--  -->
        <van-grid >
  <van-grid-item :icon="require('@/assets/1.png')" text="手机" />
  <van-grid-item :icon="require('@/assets/2.png')" text="平板" />
  <van-grid-item :icon="require('@/assets/3.png')" text="穿戴" />
  <van-grid-item :icon="require('@/assets/4.png')" text="声学" />
</van-grid>
<img src="@/assets/5.png" alt="">
      </main>
    </div>
</template>

<script setup>

const images = [
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
      require('@/assets/4.png')
    ];
</script>

<style lang="scss" scoped>

</style>